<template>
	<div class="login-container">
		<!-- <div class="banner">
      <img class="banner-img" src="~@/assets/images/login/banner.png">
    </div> -->
		<!-- <img class="logo" src="~@/assets/images/common/logo.png"> -->
		<div class="content">
			<div class="content-nav">
				<login-form v-if="formType == '1'" ref="refLoginForm" @changeType="changeType" />
				<safe-form v-else ref="refSafeForm" @changeType="changeType" />
			</div>
		</div>
	</div>
</template>

<script>
	import LoginForm from './components/login-form'
	import SafeForm from './components/safe-form'
	export default {
		name: 'Login',
		components: {
			LoginForm,
			SafeForm
		},
		data() {
			return {
				formType: '1',
				token: ''
			}
		},
		watch: {},
		mounted() {},
		methods: {
			setToken(token) {
				this.token = token
			},
			changeType(type = '1', obj = null) {
				const _this = this
				this.formType = type
				if (type == '2') {
					setTimeout(() => {
						_this.$refs.refSafeForm.init(obj)
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		width: 100%;
		height: 100vh;
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(~@/assets/images/login/bg_color.png);
		background-size: 100% 100%;
		background-repeat: repeat-x;
		&:before {
			width: 100%;
			height: 100vh;
			background-image: url(~@/assets/images/login/bg_sport.png);
			background-size: auto 100%;
			background-repeat: no-repeat;
			content: '';
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 2;
		}

		.banner {
			height: 100vh;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			&-img {
				display: block;
				height: 100vh;
				width: auto;
			}
		}

		.logo {
			position: absolute;
			top: 45px;
			left: 100px;
			width: 148px;
		}
		.content {
			position: absolute;
			z-index: 9;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			padding-right: 160px;

			&-nav {
				background: #ffffff;
				padding: 36px 36px 46px 36px;
				border-radius: 20px;
				box-shadow: 0px 4px 10px 0px #dfebf4;
			}
		}
	}

	@media only screen and (max-width: 470px) {
		.login-container {
			.content {
				width: 100vw;
				padding-right: 0;
			}
		}
	}
</style>
